<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
    	<title>接口工具</title>
    	<link rel="stylesheet" type="text/css" href="/mobile/plugin/westvalley/common/plugin/iview/iview.css">
	    <script type="text/javascript" src="/mobile/plugin/westvalley/common/plugin/vue/vue.js"></script>
	    <script type="text/javascript" src="/mobile/plugin/westvalley/common/plugin/iview/iview.js"></script>
	    <script type="text/javascript" src="/mobile/plugin/westvalley/common/plugin/jQuery/jquery.min.js"></script>
	    <script type="text/javascript" src="/mobile/plugin/westvalley/tools/http/js/formatXml.js"></script>
	    <script type="text/javascript" src="/mobile/plugin/westvalley/tools/http/js/init.js"></script>
	    <style type="text/css">
	    	.tabPane-badge-alone{
        		background: #5cb85c !important;
    		}
    		.col-text{
    			text-align:center;
    		}
	    </style>
	</head>
	<body>
		<div id="app">
			<Row>
				<i-col span="24">
					<i-input type="text" v-model="url" placeholder="url">
                		<Icon type="link" size="20" slot="prepend"></Icon>
                		<i-button slot="append" icon="ios-search" @click="executeRequest"></i-button>
            		</i-input>
				</i-col>
			</Row>
			<Row>
				<i-col span="24">
					<div style="height: 10px"></div>
				</i-col>
			</Row>
			<Row>
				<i-col span="24">
					<div style="margin: 10px">
						连接等待时间(秒):<Input-Number size="small" :min="60" v-model="connTimeOut" style="width: 300px"></Input-Number>
						读取数据等待时间(秒):<Input-Number size="small" :min="60" v-model="readTimeOut" style="width: 300px"></Input-Number>
		        	</div>
				</i-col>
			</Row>
			<Row>
				<i-col span="24">
					<div style="height: 10px"></div>
				</i-col>
			</Row>
			<Row>
				<i-col span="24">
					<Tabs :value="tabName" @on-click="selectTabs">
        				<Tab-Pane :label="headerLabel" name="HeaderParams">
        					<Card>
				                <i-form :label-width="80">
				                	<Form-Item label="序号" >
				                		<Row>
				                			<i-col span="18">
				                				<Row>
				                					<i-col span="11" offset="1" class="col-text">name</i-col>
				                					<i-col span="11" offset="1" class="col-text">value</i-col>
				                				</Row>
				                			</i-col>
				                			<i-col span="4" offset="1" class="col-text">操作</i-col>
				                		</Row>
				                	</Form-Item>
				                	<Form-Item v-for="(header, index) in headerParams" :label="'' + (index + 1)" >
				                		<Row>
				                			<i-col span="18">
				                				<Row>
				                					<i-col span="11" offset="1">
				                						<i-input type="text" v-model="header.name" placeholder="name"></i-input>
				                					</i-col>
				                					<i-col span="11" offset="1">
				                						<i-input type="text" v-model="header.value" placeholder="value"></i-input>
				                					</i-col>
				                				</Row>
				                			</i-col>
				                			<i-col span="4" offset="1">
				                				<i-button type="ghost" @click="removeHeader(index)" long>删除</i-button>
				                			</i-col>
				                		</Row>
				                	</Form-Item>
				                	<Form-Item>
							            <Row>
							                <i-col span="23">
							                    <i-button type="dashed" icon="plus-round" @click="addHeader" long>新增</i-button>
							                </i-col>
							            </Row>
							        </Form-Item>
				                </i-form>
		            		</Card>
        				</Tab-Pane>
        				<Tab-Pane :label="formLabel" name="FormParams">
        					<Card>
				                <i-form :label-width="80">
				                	<Form-Item label="序号" >
				                		<Row>
				                			<i-col span="18">
				                				<Row>
				                					<i-col span="11" offset="1" class="col-text">name</i-col>
				                					<i-col span="11" offset="1" class="col-text">value</i-col>
				                				</Row>
				                			</i-col>
				                			<i-col span="4" offset="1" class="col-text">操作</i-col>
				                		</Row>
				                	</Form-Item>
				                	<Form-Item v-for="(form, index) in formParams" :label="'' + (index + 1)" >
				                		<Row>
				                			<i-col span="18">
				                				<Row>
				                					<i-col span="11" offset="1">
				                						<i-input type="text" v-model="form.name" placeholder="name"></i-input>
				                					</i-col>
				                					<i-col span="11" offset="1">
				                						<i-input type="textarea" v-model="form.value" :row="1" placeholder="value" autosize></i-input>
				                					</i-col>
				                				</Row>
				                			</i-col>
				                			<i-col span="4" offset="1">
				                				<i-button type="ghost" @click="removeForm(index)" long>删除</i-button>
				                			</i-col>
				                		</Row>
				                	</Form-Item>
				                	<Form-Item>
							            <Row>
							                <i-col span="23">
							                    <i-button type="dashed" icon="plus-round" @click="addForm" long>新增</i-button>
							                </i-col>
							            </Row>
							        </Form-Item>
				                </i-form>
		            		</Card>
        				</Tab-Pane>
        				<Tab-Pane label="BodyParams" name="BodyParams">
        					<Card>
        						bodyContentType:<i-input type="text" v-model="bodyContentType" style="width: 300px"></i-input>
        						<br/><br/>
        						<i-input type="textarea" v-model="bodyParams" placeholder="bodyParams" autosize></i-input>
        					</Card>
        				</Tab-Pane>
        				<Tab-Pane label="ExecuteResult" name="ExecuteResult">
        					<Card>
        						ResultType:
								<i-select v-model="resultType" style="width:300px" @on-change="selectResultType">
        							<i-option v-for="item in resultTypeList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
    							</i-select>
    							<br/><br/>
        						<i-input type="textarea" v-model="execResultDisplay" placeholder="ExecuteResult" readonly :autosize="{minRows: 2}"></i-input>
        					</Card>
        				</Tab-Pane>
    				</Tabs>
				</i-col>
			</Row>	
			<Row>
				<i-col span="24">
					<div style="height: 10px"></div>
				</i-col>
			</Row>
		</div>
	</body>
</html>